import React from 'react'
import './header.css'
import { Breadcrumb } from 'antd'
import { Link } from 'react-router-dom'

class Header extends React.Component {

  state = {
    title: '',
    options: []
  }

  componentDidMount() {
    let { title, options } = this.props
    if (!title) {
      title = '页面标题'
    }
    if (!options) {
      options = [
        { name: '页面标题' },
        { name: '页面标题' },
        { name: '页面标题' }
      ]
    }
    this.setState({
      title,
      options
    })
  }
  
  render() {
    let { title, options } = this.state
    return (
      <div className="_header">
        <div className="header-breadcrumb">
          <Breadcrumb>
            {
              options.map((item, index) => {
                return (
                  item.path ?
                    <Breadcrumb.Item key={ index }>
                      <Link to={ item.path }>{ item.name }</Link>
                    </Breadcrumb.Item> :
                    <Breadcrumb.Item key={ index }>{ item.name }</Breadcrumb.Item>  
                )
              })
            }
          </Breadcrumb>
        </div>
        <div className="header-title">{ title }</div>
      </div>
    )
  }

}

export default Header